<script lang="ts">
import {defineComponent} from 'vue'
import DialogAndBlock from "@/components/DialogAndBlock/index.vue";
import {PropType} from "vue/dist/vue";
import {FileResult} from "@/entityType/FileResult";
import CodeEdit from "@/components/CodeEdit/index.vue";
import typeOfUtils from "@/utils/type-of-utils";
import {ElMessage} from "element-plus";
import demoJSCode from './SelectCustomAll/demo?raw'
import ElSelectPlus from "@/components/ElSelectPlus/index.vue";
import {SortObjType} from "@/views/dashboard/type";
import {deepClone} from "@/utils";
const glob = import.meta.glob('./SelectCustomAll/neizhi/*.js',{ eager: true,as: 'raw' });
const neizhiOptions = Object.keys(glob).map(key=>{
  let value = glob[key]
  return {
    value: key,
    code: value,
    label: key.replace('./SelectCustomAll/neizhi/','').replace('.js','')
  }
})
neizhiOptions.splice(0,0,{
  code: demoJSCode,
  value: 'ui/src/views/dashboard/SelectCustomAll/demo.js',
  label: 'demo'
})
export default defineComponent({
  name: "SelectCustomAll",
  components: {ElSelectPlus, CodeEdit, DialogAndBlock},
  props: {
    selectFileName: Array as PropType<string[]>,
    files: Array as PropType<FileResult[]>,
    sortObj: {
      type: Object as PropType<SortObjType>,
      default: ()=> {}
    }
  },
  data() {
    return {
      code: demoJSCode,
      selectValue: 'ui/src/views/dashboard/SelectCustomAll/demo.js',
      options: [
        ...neizhiOptions
      ]
    }
  },
  methods: {
    open() {
      this.$refs.dialogRef.open()
    },
    run() {
      let code = this.code + '\n return selectCustomAll'
      let func = new Function(code)
      let selectNames = func()(this.files,this.sortObj,deepClone(this.selectFileName),typeOfUtils) as string[]
      if(selectNames && typeOfUtils.isArray(selectNames)) {
        this.selectFileName.splice(0,this.selectFileName.length)
        selectNames.forEach(i=>{
          if(this.files.find(f=>f.fileName === i)) {
            this.selectFileName.push(i)
          }
        })
        ElMessage.success('执行完成')
      } else {
        ElMessage.info('返回的数据错误')
      }
    },
    selectChange(val) {
      let find = this.options.find(i=>i.value === val)
      if(find) {
        this.code = find.code
      }
    }
  }
})
</script>

<template>
  <DialogAndBlock
    title="自定义选中-可以自行修改代码然后执行"
    ref="dialogRef"
    content-overflow="unset"
  >
    <div class="fileContent">
      <div class="selectcode">
        <div style="word-break: keep-all;display: flex;align-items: center;height: 32px">
          <span>
            功能选择：
          </span>
        </div>
        <ElSelectPlus
          :options="options"
          v-model="selectValue"
          @change="selectChange"
          filterable
        ></ElSelectPlus>
      </div>
      <CodeEdit
        class="CodeEdit"
        language="javascript"
        v-model="code"
      ></CodeEdit>
      <div class="btns">
        <el-button
          @click="run"
          type="primary"
        >执行</el-button>
      </div>
    </div>
  </DialogAndBlock>
</template>

<style scoped lang="scss">
.fileContent{
  height: 70vh;
  .CodeEdit{
    height: calc(70vh - 50px - 50px) !important;
  }
  .selectcode{
    height: 50px;
    display: flex;
    align-items: flex-start;
  }
  .btns{
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }
}
</style>
